<%--
  Created by IntelliJ IDEA.
  User: LENOVO
  Date: 2021/9/24
  Time: 17:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页实例</title>
    <style>
        #banner, #content, #foot {
            width: 760px;
            margin: 0 auto;
        }

        #banner {
            text-align: center;
            height: 50px;
            background: #ab0;
            border-top: 1px solid #f00;
            padding-top: 10px;
            padding-left: 8px;
            margin-top: -10px;
            font-size: 30px;
            font-weight: bold;
            letter-spacing: 0.5em;
        }

        #content {
            margin-top: 5px;
            height: 300px;
            background: #fba;

        }

        #foot {
            margin-top: 5px;
            height: 150px;
            background: #aba;
            text-align: center;
        }

        #left {
            margin-top: 5px;
            width: 150px;
            height: 200px;
            float: left;
            border: 1px solid #0ba;
            margin-right: 5px;
        }

        #center {
            margin-top: 5px;
            width: 300px;
            height: 200px;
            float: left;
            border: 1px solid #f00;
            margin-right: 5px;
        }

        #right {
            width: 280px;
            height: 180px;
            float: left;
            border: 1px solid #0ff;

        }

    </style>
</head>
<body onload="alert('页面加载成功！！！')">
<span style="white-space: pre"></span>
<div id="banner">页首</div>
<span style="white-space: pre"></span>
<div id="content">
    <span style="white-space: pre"></span>
    <div id="left">栏目一</div>

    <span style="white-space: pre"></span>
    <div id="center">栏目二</div>

    <span style="white-space: pre"></span>
    <div id="right">栏目三</div>

</div>
<span style="white-space: pre"></span>
<div id="foot">页脚</div>


</body>
</html>
